<template>
  <div class="content">
     <ul class="flex-box">
        <li><span>姓名：</span></li>
        <li><input maxlength="30" type="text" v-model="account_name" placeholder="请输入用户姓名"></li>
        <li><img v-if="isShow" class="more-icon" @click="empty()" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <ul class="flex-box">
        <li><span>账号：</span></li>
        <li><input maxlength="20" type="text" v-model="account" @click="empty1()"  placeholder="请输入支付宝账号"></li>
        <li><img v-if="isShow1" class="more-icon" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
     <div class="tc"><button ref="btn" class="common-btn" @click="next()">下一步</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      isShow: false,
      isShow1: false,
      account_name: '',
      account: '',
      isLogin: false,
      myreg: /^((1[3,5,8,7][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,
      reg: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
      name_reg: /[\u4e00-\u9fa5]/
    }
  },
  methods: {
    next () {
      console.log(this.isLogin)
      if (this.isLogin === true) {
        if (this.name_reg.test(this.account_name) === true) {
          if (this.myreg.test(this.account) === true || this.reg.test(this.account) === true) {
          this.$apiPost(`user_account_add`, {'account': this.account, 'account_name':this.account_name ,types: '1'}
              ).then((data) => {
                if (data.msg === 'success') {
                  MessageBox.alert('支付宝账户已经绑定成功', '提示').then(() => {
                  // this.$router.back(-2)
                  window.history.go(-2)
                  })
                } else {
                  MessageBox.alert('系统繁忙，请稍后重试', '提示')
                }
              })
            } else {
              MessageBox.alert('请输入正确的支付宝账号格式', '提示')
            }
          } else {
          MessageBox.alert('请输入正确的姓名格式', '提示')
        }
      }
    },
    empty () {
      this.account_name = ''
    },
    empty1 () {
      this.account = ''
    }
  },
  updated () {
    if (this.account.length > 10 && this.account_name.length > 1) {
      this.$refs.btn.style.opacity = '1'
      this.isLogin = true
    } else {
      this.$refs.btn.style.opacity = '0.5'
      this.isLogin = false
    }
  },
  watch: {
    account_name (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    account (newM, oldM) {
      if (newM.length > 0) {
        this.isShow1 = true
      } else {
        this.isShow1 = false
      }
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
